<template>
  <BaseCard class="h-full">
    <template #header>
      <div class="flex justify-between">
        <span class="title">科研平台</span>
        <el-button type="primary" size="small" @click="gotoMore()">更多</el-button>
      </div>
    </template>
    <div class="list-wrap">
      <div class="head flex">
        <div class="flex-1">机构名称</div>
        <div style="min-width: 120px">机构编号</div>
        <div style="min-width: 120px">负责人</div>
        <div style="min-width: 110px">机构级别</div>
      </div>
      <div class="list-items">
        <div class="item flex" v-for="item in dataList" :key="item.id">
          <div class="flex-1 truncate color" @click="openUnintInfo(item.id)">
            {{ item.name }}
          </div>
          <div style="min-width: 120px">{{ item.code }}</div>
          <div style="min-width: 120px">{{ item.charger }}</div>
          <div style="min-width: 110px">{{ item.level }}</div>
        </div>
      </div>
    </div>
  </BaseCard>

  <UnitModal :opType="3" :opUnitId="opUnitId" v-model="unitModalVisible" v-if="unitModalVisible" />
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import * as homeApi from "@/api/home/index";
import UnitModal from "@/views//research/components/UnitModal.vue";
const router = useRouter();
const dataList = ref([]);
const unitModalVisible = ref(false);
const opUnitId = ref();
const queryParam = reactive({
  pageNum: 1,
  pageSize: 6,
  isAsc: undefined,
  orderBy: undefined,
  orderByColumn: undefined,
});

const openUnintInfo = (id) => {
  unitModalVisible.value = true;
  opUnitId.value = id;
  console.log(opUnitId.value, unitModalVisible.value);
};
const gotoMore = () => {
  //const obj = { path: "/home/ResearchPlatformList/", name: "ResearchPlatformList" };
  const obj = { path: "/research", name: "Research" };
  router.push(obj);
};
onMounted(async () => {
  let res = await homeApi.getKyptList(queryParam);
  if (res) {
    console.log("科研平台", res.rows);
    dataList.value = res.rows;
  }
});
</script>

<style scoped lang="scss">
@import url("../index.scss");
.color {
  color: #409eff;
}
</style>
